<template>
	<view class="chat-container">
		<template v-if="('xjs_'+userfromInfo.id) == payload.from">
			<view class="left">
				<image class="avatar" :src="userfromInfo.avatar" mode=""></image>
				<view v-if="payload.type =='txt'" class="left-txt">
					<view class="left-txt-item">{{payload.msg}}</view>
				</view>
				<view v-if="payload.type =='img'" class="left-img">
					<image @click="openVideoImg(payload.url,'img')" class="left-img-item" :src="payload.url"
						mode="aspectFill"></image>
				</view>
				<view v-if="payload.type =='video'" class="left-video">
					<view class="left-video-item" @click="openVideoImg(payload.url,'video')">
						<uni-icons type="videocam" size="40" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="right">
				<view v-if="payload.type =='txt'" class="right-txt">
					<view class="right-txt-item">{{payload.msg}}</view>
				</view>
				<view v-if="payload.type =='img'" class="right-img">
					<image @click="openVideoImg(payload.url,'img')" class="right-img-item" :src="payload.url"
						mode="aspectFill"></image>
				</view>
				<view v-if="payload.type =='video'" class="right-video">
					<view class="right-video-item" @click="openVideoImg(payload.url,'video')">
						<uni-icons type="videocam" size="40" color="#fff"></uni-icons>
					</view>
				</view>
				<image class="avatar" :src="userInfo.avatar" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo, userfromInfo } = useUserStoreToRefs()
	const emits = defineEmits(['openVideoImgPop'])
	const props = withDefaults(
		defineProps<{
			payload ?: any,
			systemHeightWidth ?: any
		}>(),
		{
			payload: () => ({}),
			systemHeightWidth: () => ({}),
		}
	)
	const previewImage = (imgUrl) => {
		//环信存储的图片在ios的抖音小程序中图片路劲在此方法中不可用
		uni.previewImage({
			loop: true,
			urls: [imgUrl]
		});
	}
	const openVideoImg = (url : string, type : string) => {
		console.log(props.systemHeightWidth.height)
		let imgIsCenter = false
		if(props.payload.type == 'img'){
			imgIsCenter = (props.systemHeightWidth.width/props.payload.width*props.payload.height)<=props.systemHeightWidth.height
		}
		emits('openVideoImgPop', {
			url: url,
			type: type,
			imgIsCenter:imgIsCenter
			
		})
	}
</script>

<style lang="scss" scoped>
	.chat-container {
		padding: 32rpx 32rpx;
		box-sizing: border-box;

		// margin-bottom: 32rpx;
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.left {
			display: flex;

			&-txt {
				padding: 0 8rpx;
				max-width: 500rpx;
				word-break: break-all;

				&-item {
					font-size: 28rpx;
					line-height: 1.6;
					letter-spacing: 2rpx;
					background-color: #ECECFF;
					padding: 24rpx 32rpx;
					border-radius: 40rpx 40rpx 40rpx 0rpx;

				}
			}

			&-img {
				width: 300rpx;
				overflow: hidden;
				margin-left: 8rpx;
				border-radius: 8rpx;

				&-item {
					width: 100%;
				}
			}

			&-video {
				width: 300rpx;
				height: 200rpx;
				overflow: hidden;
				margin-left: 8rpx;
				border-radius: 8rpx;

				&-item {
					width: 100%;
					height: 100%;
					background-color: #000;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}

		.right {
			display: flex;
			justify-content: flex-end;

			&-txt {
				padding: 0 8rpx;
				max-width: 500rpx;
				word-break: break-all;

				&-item {
					font-size: 28rpx;
					line-height: 1.6;
					letter-spacing: 2rpx;
					background-color: #FFB7C9;
					padding: 24rpx 32rpx;
					border-radius: 40rpx 40rpx 0 40rpx;

				}
			}

			&-img {
				width: 300rpx;
				overflow: hidden;
				margin-right: 8rpx;
				border-radius: 8rpx;

				&-item {
					width: 100%;
				}
			}

			&-video {
				width: 300rpx;
				height: 200rpx;
				overflow: hidden;
				margin-right: 8rpx;
				border-radius: 8rpx;

				&-item {
					width: 100%;
					height: 100%;
					background-color: #000;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
				}
			}
		}
	}
</style>